import chniaMap from "./china.json" assert { type: "json" };
import { chniaCity } from "./data-chnia.js";
var myChart = echarts.init(document.getElementById("china"));

echarts.registerMap("china", chniaMap);
const points = [
    [{ name: "西藏" }],
    [{ name: "青海" }],
    [{ name: "四川" }],
    [{ name: "北京" }],
    [{ name: "河北" }],
    [{ name: "江苏" }],
    [{ name: "上海" }],
    [{ name: "广东" }],
];
const hangzhou = [120.161693, 30.280059];
const translationLng = ([lng, lat]) => {
    // if (lng > -30) {
    //     lng = lng - 180;
    // } else {
    //     lng = lng + 180;
    // }
    return [lng, lat];
};
// 获取地图中起点和终点的坐标，以数组形式保存下来
const convertData = function (data) {
    return data.map((item) => {
        const fromCoord = chniaCity[item[0].name];
        return [
            {
                coord: translationLng(fromCoord), // 起点坐标
            },
        ];
    });
};
var option = {
    geo: {
        map: "china", //引入地图数据
        roam: false, //不开启缩放和平移
        zoom: 1, //视角缩放比例
        itemStyle: {
            areaColor: "#E6E8EB",
            borderColor: "#bbbbbb",
            emphasis: {
                areaColor: "#208dfa",
            },
        },
        emphasis: {
            areaColor: "#E6E8EB",
            label: {
                color: "#ffffff",
                fontSize: 12,
            },
        },
        // regions: [
        //     {
        //         // 选中的区域
        //         name: "浙江省",
        //         selected: true,
        //         itemStyle: {
        //             areaColor: "coral",
        //             // 高亮时候的样式
        //             emphasis: {
        //                 areaColor: "#coral",
        //             },
        //         },
        //         label: {
        //             emphasis: {
        //                 show: true,
        //             },
        //         },
        //     },
        // ],
    },
    series: [
        {
            // 散点效果
            // type: "effectScatter",
            type: "scatter",
            coordinateSystem: "geo", // 表示使用的坐标系为地理坐标系
            zlevel: 3,
            rippleEffect: {
                brushType: "stroke", // 波纹绘制效果
            },
            label: {
                normal: {
                    // 默认的文本标签显示样式
                    show: true,
                    position: "left", // 标签显示的位置
                    fontSize: 12,
                    formatter: (v) => {
                        let nameList = Object.keys(chniaCity);
                        let index = nameList.findIndex(item => {
                            return chniaCity[item][0] === v.value[0] && chniaCity[item][1] === v.value[1]
                        })
                        return index > -1 ? nameList[index] : '';
                    }, // 标签内容格式器
                },
            },
            itemStyle: {
                normal: {
                    color: "#337dfe",
                },
            },
            data: points.map((item) => {
                return {
                    value: translationLng(chniaCity[item[0].name]),
                    symbolSize: 14,
                };
            }),
        },
        {
            // 散点效果
            // type: "effectScatter",
            type: "scatter",
            coordinateSystem: "geo", // 表示使用的坐标系为地理坐标系
            zlevel: 3,
            rippleEffect: {
                brushType: "stroke", // 波纹绘制效果
            },
            label: {
                normal: {
                    // 默认的文本标签显示样式
                    show: true,
                    position: "left", // 标签显示的位置
                    fontSize: 12,
                    formatter: (v) => {
                        let nameList = Object.keys(chniaCity);
                        let index = nameList.findIndex(item => {
                            return chniaCity[item][0] === v.value[0] && chniaCity[item][1] === v.value[1]
                        })
                        return index > -1 ? nameList[index] : '';
                    }, // 标签内容格式器
                },
            },
            itemStyle: {
                normal: {
                    color: "coral",
                },
            },
            symbolSize: 14,
            data: [
                {
                    value: translationLng(hangzhou),
                }
            ],
        },
    ],
};
myChart.setOption(option);